// The masonry grid creates a two column grid layout on desktop.
// We use JavaScript to stagger the cards in each column and translate their Y
// position to create a masonry effect.
// We do this so we can have a left-to-right tab order, but still have a masonry
// layout (which is otherwise impossible with CSS alone).
.masonry-grid {
  // Ideally we would be able to set this to display: grid, 1fr so we can
  // continue to use grid-gap on mobile.
  // Unfortunately Chrome on Linux has a grid bug which causes cards to overflow
  // if we do this, so instead we set the grid to block and give the cards
  // explicit top margin on mobile.
  display: block;

  @include media-query('masonry') {
    align-items: start;
    display: grid;
    gap: get-size(500);
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  &__item + &__item {
    margin-top: get-size(400);

    @include media-query('masonry') {
      margin-top: 0;
    }
  }

  &__item {
    margin-left: auto;
    margin-right: auto;

    @include media-query('masonry') {
      grid-row: 1;
    }
  }

  &__item:nth-of-type(odd) {
    @include media-query('masonry') {
      grid-column: 1;
    }
  }

  &__item:nth-of-type(even) {
    @include media-query('masonry') {
      grid-column: 2;
    }
  }
}
